<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>gp</title>
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/utils.js"></script>
    <link href="/static/favicon.ico" rel="shortcut icon">
    <style type="text/css">
        label {
            display: flex;
            height: 60px;
            align-items: center;
            margin: 10px 0;
        }
        label span {
            width: 50px;
        }
        label input {
            flex: 1;
            height: 60px;
            border: 1px solid #ebebeb;
        }
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .gray {
            color: gray;
        }
        .sz {
            position: absolute;
            right: 10px;
            top: 10px;
        }
        .real {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            font-size: 30px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .real_inner {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid red;
            text-align: center;
            line-height: 200px;
        }
        button {
            height: 70px;
            width: 100%;
            background-color: #ccc;
        }
        input {}
    </style>
</head>
<body>
<div class="out">
    <label for="gpid">
    <span>号码：</span>
    <input id="gpid" type="text">
</label>
    <label for="gpcb">
        <span>成本：</span>
        <input id="gpcb" type="text">
    </label>
    <label for="gpnum">
        <span>数量：</span>
        <input id="gpnum" type="text">
    </label>
    <button id="submit">确定</button>
</div>
<div style="display: none" id="money" class="real">
    <div class="real_inner">0</div>
</div>
<span class="sz" style="display: none;" id="sz">0</span>
<script>
    var storeKey = 'store_17det_gp'
    var timer = null
    var ws = null
    var szWs = null
    var szTimer = null
    initPage()
    initSZ()
    $('#submit').click(function() {
        initWS()
    })
    function initWS() {
        if (ws && ws.readyState === 1) {
            ws.close()
            timer && clearInterval(timer)
        }
        var id = $('#gpid').val()
        var cb = $('#gpcb').val()
        var num = $('#gpnum').val()
        setLocal(id, cb, num)
        var url = 'ws://hq.sinajs.cn/wskt?list='+ id +','+ id + '_i'
        $('.out').remove()
        ws = new WebSocket(url)
        ws.onopen = function() {
            timer && clearInterval(timer)
            timer = setInterval(function() {
                ws.send('')
            }, 60 * 1000)
        }
        ws.onmessage = function(res) {
            var data = hqParser.a(res.data, id)
            var yk = parseInt((data.now - cb) * num)
            console.log('yk', yk)
            console.log('data', data)
            if (yk >= 0) {
                $('#money').removeClass('green').addClass('red').find('.real_inner').text(yk)
            } else {
                $('#money').removeClass('red').addClass('green').find('.real_inner').text(yk)
            }
            $('#money').css('display', 'flex')
        }
    }
    function initPage() {
        var data = getLocal()
        if (data && data.id) {
            $('#gpid').val(data.id)
            $('#gpcb').val(data.cb)
            $('#gpnum').val(data.num)
        }
    }
    function setLocal(id, cb, num) {
        var obj = {
            id: id,
            cb: cb,
            num: num
        }
        localStorage.setItem(storeKey, JSON.stringify(obj))
    }
    function getLocal() {
        var data = {}
        try {
            data = JSON.parse(localStorage.getItem(storeKey))
        } catch (e) {}
        return data
    }
    function initSZ() {
        var url = 'ws://hq.sinajs.cn/wskt?list=sh000001'
        szWs = new WebSocket(url)
        szWs.onopen = function () {
            szTimer && clearInterval(szTimer)
            szTimer = setInterval(function() {
                szWs.send('')
            }, 60 * 1000)
        }
        szWs.onmessage = function(res) {
            var dom = $('#sz')
            var data = hqParser.a(res.data, 'sh000001')
            var per = data.changeP.toFixed(2)
            dom.text(per).show()
            if (per >= 0) {
                dom.removeClass('green').addClass('red')
            } else {
                dom.removeClass('red').addClass('green')
            }

        }
    }
</script>
</body>
</html>